<template>
  <div :class="abcd['hello-world']">
    <h2 :class="abcd.box">HelloWorld</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: '#fff'
    }
  }
}
</script>

<!-- 
  除了 scoped 可以设置让当前样式局部生效之后，还可以设置 module


  内部原理：
    1. 增加了 module 属性的 style 会把所有的 css 都生效随机的名字

      .hello-world => ._hello-world_1fju1_3

    2. 我们如何得知它会生成什么样的类名呢？

      给我们提供一个  $style 的数据，该数据是个对象，对象如下表示：

      {
        'hello-world': '_hello-world_1fju1_3',
        'box': '_box_asdfasdfasd'
      }
 -->

<style module="abcd">
.hello-world {
  width: 500px;
  height: 500px;
  background-color: red;
}

.box {
  /* color: #fff; */

  color: v-bind(color);
}
</style>
